<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://localhost:8080/layui/css/layui.css">

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
    <!--    ecahrts文件引入-->
    <script type="text/javascript" src="http://localhost:8080/echarts/echarts.min.js"></script>
</head>
<script type="text/javascript" src="http://localhost:8080/layui/layui.js"></script>
<body>
<div class="nav"><h3>宠物商店后台管理系统 </h3></div>
<div class="row">
    <div class="rowleft">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li id="data" class="layui-nav-item"><a href="/petback/data">产品和用户数据</a></li>
            <li id="pet" class="layui-nav-item">
                <a href="javascript:;">商品管理</a>
                <dl class="layui-nav-child">
                    <dd><a id="cat" href="/petback/cats">管理--猫</a></dd>
                    <dd><a id="dog" href="/petback/dogs">管理--狗</a></dd>
                    <dd><a id="fish" href="/petback/reptiles">管理--鱼</a></dd>
                    <dd><a id="bird" href="/petback/birds">管理--鸟</a></dd>
                </dl>
            </li>
            <li id="order" class="layui-nav-item"><a href="/petback/order">订单管理</a></li>
            <li id="user" class="layui-nav-item"><a href="/petback/user">用户信息管理</a></li>
        </ul>
    </div>
    <div style="display: flex;flex-direction: column; align-items: center">
        <div class="rowright">
            <!--               内容是左右排列-->
            <div id="main" style="margin-top: 45px; width: 550px;height:500px;"></div>
            <div id="main2" style="width: 500px;height:500px;"></div>
        </div>
    </div>

</div>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58"
        crossorigin="anonymous"></script>
</body>

<script type="text/javascript">
    $("#data").addClass("changecolor")
    //获取数据
    let bird = 0;
    let dog = 0;
    let cat = 0;
    let fish = 0;
    let onedata = 0;
    let twodata = 0;
    let threedata = 0;
    let fourdata = 0
    // 第一个
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: '销量统计',
            subtext: 'Pet Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1, name: '猫'},
                    {value: 1, name: '狗'},
                    {value: 1, name: '鱼'},
                    {value: 1, name: '鸟'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 第二个
    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    var option2;
    option2 = {
        xAxis: {
            type: 'category',
            data: ['一季度', '二季度', '三季度', '四季度']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [12, 20, 15, 8],
                type: 'bar'
            }
        ]
    };
    $.ajax({
        url: 'http://localhost:8080//petback/order/getOrdersByItemid',
        type: 'GET',
        contentType: 'application/json',
        dataType: 'text',
        success: function (data) {
            let json = JSON.parse(data);
            for (let i = 0; i < json['msg'].length; i++) {
                if (json['msg'][i].itemid.substring(4, 6) >= "1" && json['msg'][i].itemid.substring(4, 6) <= "10") {
                    bird++;
                } else if (json['msg'][i].itemid.substring(4, 6) >= "11" && json['msg'][i].itemid.substring(4, 6) <= "21") {
                    cat++;
                } else if (json['msg'][i].itemid.substring(4, 6) >= "22" && json['msg'][i].itemid.substring(4, 6) <= "28") {
                    dog++;
                } else if (json['msg'][i].itemid.substring(4, 6) >= "29" && json['msg'][i].itemid.substring(4, 6) <= "39") {
                    fish++;
                } else {

                }
            }
            option.series[0].data[0].value = cat;
            option.series[0].data[1].value = dog;
            option.series[0].data[2].value = fish;
            option.series[0].data[3].value = bird;
            option && myChart.setOption(option);
            for (let i = 0; i < json['msg'].length; i++) {
                if (json['msg'][i].createTime.substring(5, 7) >= "10" && json['msg'][i].createTime.substring(5, 7) <= "12") {
                    fourdata++
                } else if (json['msg'][i].createTime.substring(6, 7) >= "1" && json['msg'][i].createTime.substring(6, 7) <= "3") {
                    onedata++;
                } else if (json['msg'][i].createTime.substring(6, 7) >= "4" && json['msg'][i].createTime.substring(6, 7) <= "6") {
                    twodata++;
                } else if (json['msg'][i].createTime.substring(6, 7) >= "7" && json['msg'][i].createTime.substring(6, 7) <= "9") {
                    threedata++;
                } else {
                }
            }
            option2.series[0].data[0] = onedata;
            option2.series[0].data[1] = twodata;
            option2.series[0].data[2] = threedata;
            option2.series[0].data[3] = fourdata;
            option2 && myChart2.setOption(option2);
        }
    })
</script>

<style>
    .nav {
        background-color: #9F9F9F;
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .rowleft {
        width: 200px;
        height: 550px;
        background-color: #393d49;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .rowright {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 550px;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
    }

    .changecolor {
        background-color: #009999;
    }

</style>

</html>
